<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增订单')"/>
    <style type="text/css">
        .agile-detail a {
            margin-top: -30px;
        }

        .agile-detail img {
            width: 50px;
            height: 50px;
        }

        form .sortable-list .agile-detail .goodsNumber {
            display: block !important;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div class="row">
        <div class="col-sm-6">
            <form class="form-horizontal m" id="form-order-edit" th:object="${restOrder}">
                <div class="form-group">
                    <label class="col-sm-3 control-label">订单号：</label>
                    <div class="col-sm-8">
                        <input  name="orderNo" class="form-control" type="text" th:field="*{orderNo}" disabled>
                        <input  name="orderNo" class="form-control" type="hidden" th:field="*{orderNo}" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">桌位号：</label>
                    <div class="col-sm-8">
                        <input name="deskNum" class="form-control" type="text" th:field="*{deskNum}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">订单金额：</label>
                    <div class="col-sm-8 input-group m-b">
                        <span class="input-group-addon">&yen;</span>
                        <input name="money" class="form-control" type="text" th:disabled="true" th:field="*{money}"> <span
                            class="input-group-addon">.00</span>
                    </div>
                </div>
               <!-- <div class="form-group">
                    <label class="col-sm-3 control-label">实付金额：</label>
                    <div class="col-sm-8">
                        <input name="payMoney" class="form-control" type="text" th:disabled="true">
                    </div>
                </div>-->
                <div class="form-group">
                    <label class="col-sm-3 control-label">用餐人数：</label>
                    <div class="col-sm-8 input-group">
                        <input name="useMunber" class="form-control" type="number" th:field="*{useMunber}"> <span
                            class="input-group-addon">人</span>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-3 control-label">添加商品：</label>
                    <div class="col-sm-8">
                        <div class="ibox">
                            <div class=" ibox-content">
                                <p class="small"><i class="fa fa-hand-o-up"></i>从右侧商品列表拖拽商品至此</p>
                                <ul class="sortable-list connectList agile-list">
                                    <li class="success-element" th:each="detail : ${orderGoodsList}">
                                        <input id="goodsId" type="hidden" th:value="${detail.goodsId}">
                                        <span th:text="${detail.goodsName}"></span>
                                        <div class="agile-detail">
                                            <a href="#" class="pull-right btn btn-xs btn-white"><img th:src="${detail.goodsUrl}"></a>
                                            <i class="glyphicon glyphicon-yen"></i> <span class="goodsMoney" th:text="${detail.goodsMoney}"></span>
                                            <div class="goodsNumber" style="display: none">数量：
                                                <input id="goodsNum" class="form-control" type="number" min="1" value="1" th:value="${detail.goodsNum}"
                                                       onchange="jisuan()">
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">备注：</label>
                    <div class="col-sm-8">
                        <textarea name="remark" class="form-control" th:field="*{remark}"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-2">
                        <input type="button" class="btn btn-primary" onclick="submitHandler()" value="提交订单"/>
                        <button class="btn btn-white" type="submit">取消</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="col-md-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h3>商品列表</h3>
                    <p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动商品</p>
                    <ul class="sortable-list connectList agile-list">
                        <li class="success-element" th:each="goods : ${goodsList}">
                            <input id="goodsId" type="hidden" th:value="${goods.id}">
                            <span th:text="${goods.goodsName}"></span>
                            <div class="agile-detail">
                                <a href="#" class="pull-right btn btn-xs btn-white"><img th:src="${goods.goodsUrl}"></a>
                                <i class="glyphicon glyphicon-yen"></i> <span class="goodsMoney" th:text="${goods.money}"></span>
                                <div class="goodsNumber" style="display: none">数量：
                                    <input id="goodsNum" class="form-control" type="number" min="1" value="1"
                                           onchange="jisuan()">
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "rest/order"
    $("#form-order-add").validate({
        focusCleanup: true
        /*deskNum:{
            required:true
        },
        useMunber:{
            required:true
        },*/
    });
    $(document).ready(function () {
        $(".sortable-list").sortable({
            connectWith: ".connectList", update: function (n, t) {
                jisuan();
            }
        }).disableSelection()
    });

    function jisuan() {
        var money = 0;
        $("form .success-element").each(function (i, doc) {
            var num = $(doc).find("#goodsNum").val() || 1;
            money += parseFloat($(doc).find(".goodsMoney").text()) * num;
        });
        $("input[name='money']").val(money);
    }

    function getGoodsData() {
        var goodsData = [];
        $("form .success-element").each(function (i, doc) {
            var id = $(doc).find("#goodsId").val();
            var num = $(doc).find("#goodsNum").val() || 1;
            goodsData.push({goodsId: id, goodsNum: num});
        });
        return goodsData;
    }

    function submitHandler() {

        if ($.validate.form()) {
            var data = {};
            var array = $('#form-order-edit').serializeArray();
            if (array != null) {
                for (item of  array) {
                    data[item.name] = item.value;
                }
            }
            console.log(array);
            console.log(data);
            if (!data.deskNum) {
                $.modal.alertError("请输入桌号！");
                return;
            }
            if (!data.useMunber) {
                $.modal.alertError("请输入用餐人数！");
            }
            if(!data.orderNo){
                $.modal.alertError("订单号为空");
                return;
            }
            var goodsData = getGoodsData();
            if (goodsData.length == 0) {
                $.modal.alertError("必须选择商品！");
                return;
            }
            data.goodsList = goodsData;

            $.operate.postAjax(prefix + "/add", data,function (res) {
                $.operate.saveReload(res);
            });
        }
    }
</script>
</body>
</html>